Reactjs Interview Questions | More Info | Notesale | Buy and Sell Study Notes Online | Extra Student Income | University Notes

Search for notes by fellow students, in your own course and all over the country.

Browse our notes for titles which look like what you need, you can preview any of the notes via a sample of the contents. After you're happy these are the notes you're after simply pop them into your shopping cart.

My Basket

Buy These Notes

You have nothing in your shopping cart yet.

Title: Reactjs Interview Questions
Description: React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.in this notes i have done 300+ interview questions and answers so that is best for interview from my side

Buy These Notes Preview

Document Preview

Extracts from the notes are below, to see the PDF you'll receive please use the links above

its arguments changes
� Back to Top
183
...
Redux Form can be used with raw
HTML5 inputs, but it also works very well with common UI frameworks
like Material UI, React Widgets and React Bootstrap
...

What are the main features of Redux Form?
Some of the main features of Redux Form are:
1
...

2
...

3
...

� Back to Top
185
...

91

For example, you can add redux-thunk and logger passing them as arguments to applyMiddleware():
import { createStore, applyMiddleware } from 'redux'
const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore)
� Back to Top
186
...

How Relay is different from Redux?
Relay is similar to Redux in that they both use a single store
...
Relay caches the data for you and
optimizes data fetching for you, by fetching only changed data and nothing
more
...

What is an action in Redux?
Actions are plain JavaScript objects or payloads of information that send
data from your application to your store
...
Actions must have a type property that indicates
the type of action being performed
...

What is the difference between React Native and React?
React is a JavaScript library, supporting both front end web and being
run on the server, for building user interfaces and web applications
...

� Back to Top
189
...

You can run the app in your mobile using expo app (https://expo
...

� Back to Top
190
...
log, console
...
As of React Native v0
...

93

How to debug your React Native?
Follow the below steps to debug React Native app:
1
...

2
...

3
...

4
...

5
...

React supported libraries & Integration
� Back to Top
192
...
It was originally written to compute derived data from Redux-like
applications state, but it can’t be tied to any architecture or library
...
If the the same
inputs are provided twice in a row, Reselect returns the cached output
...

� Back to Top
193
...

Flow types can express much more fine-grained distinctions than traditional type systems
...

� Back to Top
194
...

94

PropTypes is a basic type checker (runtime checker) which has been
patched onto React
...
If you want more flexible
typechecking for your entire project Flow/TypeScript are appropriate
choices
...

How to use Font Awesome icons in React?
The below steps followed to include Font Awesome in React:
1
...
Import font-awesome in your index
...
min
...
Add Font Awesome classes in className:
render() {
return

}
� Back to Top
196
...
It exists both as a browser extension (for
Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native)
...

1
...
Firefox extension
3
...

Why is DevTools not loading in Chrome for local files?
If you opened a local HTML file in your browser (file://
...

95

� Back to Top
198
...
Create a Polymer element:
jsx harmony /> Polymer({
is: 'calender-element',
ready:
function() {
this
...
Create the Polymer component HTML tag by importing it in a
HTML document, e
...
import it in the index
...
/src/polymer-components/calender-element
...
Use that element in the JSX file:
import React from 'react'
class MyComponent extends React
...

What are the advantages of React over Vue
...
js:
1
...

3
...

Gives more flexibility in large apps developing
...

Suitable for mobile apps creating
...

Note: The above list of advantages are purely opinionated and it vary based
on the professional experience
...

� Back to Top

96

200
...

React

Angular

React is a library and has only
the View layer
React handles rendering on
the server side

Angular is a framework and has complete
MVC functionality
AngularJS renders only on the client side
but Angular 2 and above renders on the
server side
Angular follows the template approach for
HTML, which makes code shorter and easy
to understand
Ionic, Angular’s mobile native app is
relatively less stable and slower

React uses JSX that looks like
HTML in JS which can be
confusing
React Native, which is a React
type to build mobile
applications are faster and
more stable
In React, data flows only in
one way and hence debugging
is easy

In Angular, data flows both way i
...
But they are helpful as base parameters
...

Why React tab is not showing up in DevTools?
When the page loads, React DevTools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__,
then React communicates with that hook during initialization
...

� Back to Top
202
...

It removes the mapping between styles and components, and lets you write
actual CSS augmented with JavaScript
...

Give an example of Styled Components?
Lets create and <Wrapper> components with specific styles for each ... h1` font-size: 1 ... section` padding: 4em; background: papayawhip; ` These two variables, Title and Wrapper, are now components that you can render just like any other react component ... What is Relay? Relay is a JavaScript framework for providing a data layer and client-server communication to web applications using the React view layer ... How to use TypeScript in create-react-app application? Starting from react-scripts@2 ... 0 or higher, there is a built-in support for typescript ... e, create-react-app now supports typescript natively ... react-scripts-ts is a set of adjustments to take the standard create-react-app project pipeline and bring TypeScript into the mix ... gitignore �� images ... ts �� node_modules/ �� public/ �� src/ � �� ... json �� tsconfig ... prod ... test ... json Miscellaneous � Back to Top 206 ... Selectors can compute derived data, allowing Redux to store the minimal possible state ... Selectors are eﬀicient ... 3 ... They can be used as input to other selectors ... Give an example of Reselect usage? Let’s take calculations and different amounts of a shipment order with the simplified usage of Reselect: 99 import { createSelector } from 'reselect' const shopItemsSelector = state => state ... items const taxPercentSelector = state => state ... taxPercent const subtotalSelector = createSelector( shopItemsSelector, items => items ... value, 0) ) const taxSelector = createSelector( subtotalSelector, taxPercentSelector, (subtotal, taxPercent) => subtotal * (taxPercent / 100) ) export const totalSelector = createSelector( subtotalSelector, taxSelector, (subtotal, tax) => ({ total: subtotal + tax }) ) let exampleState = { shop: { taxPercent: 8, items: [ { name: 'apple', value: 1 ... 95 }, ] } } console ... 15 console ... 172 console ... 322 } � Back to Top 209 ... createClass(): someComponent= React ... } } }) But you can write statics inside ES6+ classes as below, class Component extends React ... } static someMethod() { // ... Component { ... propTypes = { ... someMethod = function(){ ... Can Redux only be used with React? Redux can be used as a data store for any UI layer ... Redux simply provides a subscription mechanism which can be used by any other code ... Do you need to have a particular build tool to use Redux? Redux is originally written in ES6 and transpiled for production into ES5 with Webpack and Babel ... Redux also offers a UMD build that can be used directly without any build process at all ... 101 How Redux Form initialValues get updated from state? You need to add enableReinitialize : true setting ... � Back to Top 213 ... For example, the height property can be defined with either string or number type as below: Component ... oneOfType([ PropTypes ... number ]) } � Back to Top 214 ... This feature is available with react-scripts@2 ... 0 and higher ... /logo ... � Back to Top 215 ... This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one ... log("Input Value is: ", this ... value) } render () { return ( <form onSubmit={this ... input = input} /> // Access DOM input in handle submit <button type='submit'>Submit</button> </form> ) } } But our expectation is for the ref callback to get called once, when the component mounts ... log("Input Value is: ", this ... value) } setSearchInput = (input) => { this ... handleSubmit}> <input type='text' ref={this ... 3, � Back to Top 216 ... It means that you decorate your component by wrapping it into a Higher-Order component ... It does not actually enable hijacking, but by using HOC you make your component behave differently ... What are HOC factory implementations? There are two main ways of implementing HOCs in React ... Props Proxy (PP) and 2 ... But they follow different approaches for manipulating the WrappedComponent ... We also pass through the props that the HOC receives, hence the name Props Proxy ... Component { render() { return <WrappedComponent { ... props}/> } } } Inheritance Inversion In this approach, the returned HOC class (Enhancer) extends the WrappedComponent ... In this way the relationship between them seems inverse ... render() } } } � Back to Top 218 ... render(<User age={30} department={"IT"} />, document ... Do I need to keep all my state into Redux? Should I ever use react internal state? It is up to the developer’s decision, i ... , it is developer’s job to determine what kinds of state make up your application, and where each piece of state should live ... Others prefer to keep non-critical or UI state, such as “is this dropdown currently open”, inside a component’s internal state ... Do other parts of the application care about this data? 2 ... Is the same data being used to drive multiple components? 4 ... Do you want to cache the data (i ... What is the purpose of registerServiceWorker in React? React creates a service worker for you without any configuration by default ... It’s all about adding offline capabilities to your site ... /App'; registerServiceWorker from ' ... render(<App />, document ... What is React memo function? Class components can be restricted from re-rendering when their input props are the same using PureComponent or shouldComponentUpdate ... memo ... memo(function MyComponent(props) { /* only rerenders if props change */ }); � Back to Top 222 ... lazy function lets you render a dynamic import as a regular component ... This must return a Promise which resolves to a module with a default export containing a React component ... lazy(() => import(' ... lazy and Suspense is not yet available for server-side rendering ... � Back to Top 223 ... If the values are the same then you need to return null to stop re-rendering otherwise return the latest state value ... setState(state if (state ... address; => { === latestAddress) { latestAddress }; � Back to Top 224 ... You are able to return multiple sibling elements without a wrapping element by returning an array ... const JSDevs = () => { return ( <ul> <li>Brad</li> <li>Brodge</li> <ReactJSDevs/> <li>Brandon</li> </ul> ); } Strings and Numbers: You can also return string and number type from the render method ... How to use class field declarations syntax in React classes? React Class Components can be made much more concise using the class field declarations ... Let’s take a counter example to demonstrate class field declarations for state without using constructor and methods without binding, class Counter extends Component { state = { value: 0 }; handleIncrement = () => { this ... value + 1 })); 108 }; handleDecrement = () => { this ... value - 1 })); }; render() { return ( <div> {this ... value} <button onClick={this ... handleDecrement}>-</button> </div> ) } } � Back to Top 226 ... 8) that lets you use state and other React features without writing a class ... What rules need to be followed for hooks? You need to follow two rules in order to use hooks, 1 ... i ... This will ensure that Hooks are called in the same order each time a component renders and it preserves the state of Hooks between multiple useState and useEffect calls ... Call Hooks from React Functions only ... e, You shouldn’t call Hooks from regular JavaScript functions ... How to ensure hooks followed the rules in your project? React team released an ESLint plugin called eslint-plugin-reacthooks that enforces these two rules ... "react-hooks" ], "rules": { // ... � Back to Top 229 ... What are the benefits of React Router V4? Below are the main benefits of React Router V4 module, 1 ... A router can be visualized as a single component(<BrowserRouter>) which wraps specific child router components(<Route>) ... You don’t need to manually set history ... 3 ... Can you describe about componentDidCatch lifecycle method signature? The componentDidCatch lifecycle method is invoked after an error has been thrown by a descendant component ... error: - The error object which was thrown 2 ... The method structure would be as follows componentDidCatch(error, info) � Back to Top 232 ... Inside Event handlers 2 ... During Server side rendering 4 ... 111 Why do you not need error boundaries for event handlers? Error boundaries do not catch errors inside event handlers ... Unlike the render method and lifecycle methods, the event handlers don’t happen during rendering ... If you need to catch an error inside an event handler, use the regular JavaScript try / catch statement: class MyComponent extends React ... state = { error: null }; this ... handleClick ... setState({ error }); } } render() { if (this ... error) { return <h1>Caught an error ... handleClick}>Click Me</button> } } Note that the above example is demonstrating regular JavaScript behavior and doesn’t use error boundaries ... What is the difference between try catch block and error boundaries? Try catch block works with imperative code whereas error boundaries are meant for declarative code to render on the screen ... } Whereas error boundaries wrap declarative code as below, <ErrorBoundary> <MyComponent /> </ErrorBoundary> So if an error occurs in a componentDidUpdate method caused by a setState somewhere deep in the tree, it will still correctly propagate to the closest error boundary ... What is the behavior of uncaught errors in react 16? In React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree ... For example, it is worse for a payments app to display a wrong amount than to render nothing ... What is the proper placement for error boundaries? The granularity of error boundaries usage is up to the developer based on project needs ... You can wrap top-level route components to display a generic error message for the entire application ... You can also wrap individual components in an error boundary to protect them from crashing the rest of the application ... What is the benefit of component stack trace from error boundary? Apart from error messages and javascript stack, React16 will display the component stack trace with file names and line numbers using error boundary concept ... What is the required method to be defined for a class component? The render() method is the only required method in a class component ... e, All methods other than render method are optional for a class component ... What are the possible return types of render method? Below are the list of following types used and return from render method, 1 ... It includes html elements such as <div/> and user defined elements ... Arrays and fragments: Return multiple elements to render as Arrays and Fragments to wrap multiple elements 3 ... 4 ... Booleans or null: Doesn’t render anything but these types are used to conditionally render content ... What is the main purpose of constructor? The constructor is mainly used for two purposes, 1 ... state 114 2 ... setState() here! this ... handleClick = this ... bind(this); } � Back to Top 241 ... i ... � Back to Top 242 ... This is used for undefined props, but not for null props ... Component { // ... defaultProps = { color: 'red' }; If props ... i ... color will be set to red } Note: If you provide null value then it remains null value ... 115 Why should not call setState in componentWillUnmount? You should not call setState() in componentWillUnmount() because once a component instance is unmounted, it will never be mounted again ... What is the purpose of getDerivedStateFromError? This lifecycle method is invoked after an error has been thrown by a descendant component ... The signature of the lifecycle method is as follows, static getDerivedStateFromError(error) Let us take error boundary use case with the above lifecycle method for demonstration purpose, class ErrorBoundary extends React ... state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI ... state ... </h1>; } return this ... children; } } � Back to Top 245 ... The below methods are called in the following order when a component is being re-rendered ... 2 ... 4 ... static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() � Back to Top 246 ... 1 ... componentDidCatch() � Back to Top 247 ... Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or��value = this ... */ } render() { let value = this ... contextType = MyContext; 2 ... 133 class MyClass extends React ... context; /* render something based on the value */ } } � Back to Top 280 ... It requires a function as a child which receives current context value as argument and returns a react node ... Lets take a simple example, <MyContext ... Consumer> � Back to Top 281 ... For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for value ... Component { render() { return ( <Provider value={{something: 'something'}}> <Toolbar /> </Provider> ); } } This can be solved by lifting up the value to parent state, 134 class App extends React ... state = { value: {something: 'something'}, }; } render() { return ( <Provider value={this ... value}> <Toolbar /> </Provider> ); } } � Back to Top 282 ... It is handled differently by React just like key ... In this case, you can use Forward Ref API ... forwardRef API ... Component { componentDidUpdate(prevProps) { console ... log('new props:', this ... rest} = this ... rest} />; } } return React ... props} forwardedRef={ref} />; }); } Let’s use this HOC to log all props that get passed to our “fancy button” component, class FancyButton extends React ... } // ... In this case, you can set focus to button element ... /FancyButton'; const ref = React ... current ... Is ref argument available for all functions or class components? Regular function or class components don’t receive the ref argument, and ref is not available in props either ... forwardRef call ... Why do you need additional care for component libraries while using forward refs? When you start using forwardRef in a component library, you should treat it as a breaking change and release a new major version of your library ... These changes can break apps and other libraries that depend on the old behavior ... How to create react class components without ES6? If you don’t use ES6 then you may need to use the create-react-class module instead ... Whereas for initial state, you have to provide a separate getInitialState method that returns the initial state ... props ... log(this ... message); }, render: function() { return <h1>Hello, {this ... name}</h1>; } }); Note: If you use createReactClass then auto binding is available for all methods ... e, You don’t need to use ... � Back to Top 286 ... Actually it is convenient when you don’t want to set up compilation in your build environment ... createElement(component, props, ... For example, let us take a greeting example with JSX, class Greeting extends React ... props ... render( <Greeting message="World" />, document ... Component { render() { return React ... props ... render( React ... getElementById('root') ); � Back to Top 287 ... The diﬀing algorithms is generating the minimum number of operations to transform one tree into another ... In this case, displaying 1000 elements would require in the order of one billion comparisons ... Instead, React implements a heuristic O(n) algorithm based on two assumptions: 1 ... 2 ... � Back to Top 288 ... The behavior is different depending on the types of the root elements ... Elements Of Different Types: Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch ... 2 ... Lets take an example with same DOM elements except className attribute, <div className="show" title="ReactJS" /> <div className="hide" title="ReactJS" /> 3 ... React updates the props of the underlying component instance to match the new element, and calls componentWillReceiveProps() and componentWillUpdate() on the underlying instance ... 4 ... For example, when adding an element at the end of the children, converting between these two trees works well ... Handling keys: React supports a key attribute ... For example, adding a key can make the tree conversion eﬀicient, <ul> <li key="2015">Duke</li> 139 <li key="2016">Villanova</li> </ul> <ul> <li key="2014">Connecticut</li> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul> � Back to Top 289 ... Managing focus, text selection, or media playback ... Triggering imperative animations ... Integrating with third-party DOM libraries ... Must prop be named as render for render props? Even though the pattern named render props, you don’t have to use a prop named render to use this pattern ... e, Any prop that is a function that a component uses to know what to render is technically a “render prop” ... x}, {mouse ... Instead, you can keep it directly inside element, <Mouse> {mouse => ( The mouse position is {mouse ... y} )} </Mouse> While using this above technique(without any name), explicitly state that children should be a function in your propTypes ... propTypes = { children: PropTypes ... isRequired }; 140 � Back to Top 291 ... Because the shallow prop comparison will always return false for new props, and each render in this case will generate a new value for the render prop ... � Back to Top 292 ... For example, if you would prefer to have a withMouse HOC instead of a component, you could easily create one using a regular with a render prop ... Component { render() { return ( <Mouse render={mouse => ( <Component { ... props} mouse={mouse} /> )}/> ); } } } This way render props gives the flexibility of using either pattern ... What is windowing technique? Windowing is a technique that only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created ... Both react-window and react-virtualized are popular windowing libraries 141 which provides several reusable components for displaying lists, grids, and tabular data ... How do you print falsy values in JSX? The falsy values such as false, null, undefined, and true are valid children but they don’t render anything ... Let’s take an example on how to convert to a string, <div> My JavaScript variable is {String(myVariable)} ... What is the typical use case of portals? React portals are very useful when a parent component has overflow: hidden or has properties that affect the stacking context (e ... z-index, position, opacity) and you need to visually “break out” of its container ... � Back to Top 296 ... With an uncontrolled component, you might want React to specify the initial value, but leave subsequent updates uncontrolled ... render() { return ( <form onSubmit={this ... input} /> </label> <input type="submit" value="Submit" /> </form> ); } The same applies for select and textArea inputs ... � Back to Top 297 ... It mainly uses Redux and redux-saga for state management and asynchronous side-effects, react-router for routing purpose, styled-components for styling react components, axios for invoking REST api, and other supported stack such as webpack, reselect, ESNext, Babel ... com/react-boilerplate/react-boilerplate and start working on any new react project ... What is the difference between Real DOM and Virtual DOM? Below are the main differences between Real DOM and Virtual DOM, Real DOM Virtual DOM Updates are slow DOM manipulation is very expensive ... It causes too much of memory wastage Creates a new DOM if element updates Updates are fast DOM manipulation is very easy You Can’t directly update HTML There is no memory wastage It updates the JSX if element update � Back to Top 299 ... Using the Bootstrap CDN: This is the easiest way to add bootstrap ... 2 ... React Bootstrap Package: In this case, you can add Bootstrap to our React app is by using a package that has rebuilt Bootstrap components to work particularly as React components ... react-bootstrap 2 ... Can you list down top websites or applications using react as front end framework? Below are the top 10 websites using React as their front-end framework, 1 ... 3 ... 5 ... 7 ... 9 ... Facebook Uber Instagram WhatsApp Khan Academy Airbnb Dropbox Flipboard Netflix PayPal � Back to Top 301 ... css file as usual and refer to them using className ... But If you want to try a different approach(CSS-In-JS) then styled-components library is a good option ... Do I need to rewrite all my class components with hooks? No ... Because there are no plans to remove classes in ReactJS ... How to fetch data with React Hooks? The effect hook called useEffect is used to fetch the data with axios from the API and to set the data in the local state of the component with the state hook’s update function ... algolia ... data); })() }, []); return ( <ul> {data ... map(item => ( <li key={item ... url}>{item ... i ... � Back to Top 304 ... Currently there are no Hook equivalents to the uncommon getSnapshotBeforeUpdate and componentDidCatch lifecycles yet ... What is the stable release for hooks support? React includes a stable implementation of React Hooks in 16 ... 2 ... 4 ... Why do we use array destructuring (square brackets notation) in useState? When we declare a state variable with useState, it returns a pair — an array with two items ... Using [0] and [1] to access them is a bit confusing because they have a specific meaning ... For example, the array index access would look as follows: var userStateVariable = useState('userProfile'); // Returns an array pair var user = userStateVariable[0]; // Access first item var setUser = userStateVariable[1]; // Access second item Whereas with array destructuring the variables can be accessed as follows: const [user, setUser] = useState('userProfile'); � Back to Top 146 307 ... Below are some of them, 1 ... Community experiments with render prop APIs such as Reactions Component 3 ... 4 ... 5 ... � Back to Top 308 ... You will need to use a ref to interact with the DOM node directly if you want to access imperative API of a web component ... � Back to Top 309 ... Getting values in and out of form state 2 ... Handling form submission � Back to Top 310 ... � Back to Top 147 311 ... You need a transpiler to convert your JSX to regular Javascript that browsers can understand ... � Back to Top 312 ... � Back to Top 313 ... The react-scripts start command sets up the development environment and starts a server, as well as hot module reloading ... What are the features of create react app? Below are the list of some of the features provided by create react app ... React, JSX, ES6, Typescript and Flow syntax support ... Autoprefixed CSS 3 ... A live development server 5 ... A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps 7 ... � Back to Top 148 315 ... It also helps search engines to crawl your pages easily for SEO purposes ... � Back to Top 316 ... For reactJs application, you need to install below packages, bash npm install mobx --save npm install mobx-react --save � Back to Top 317 ... 149 Should I learn ES6 before learning ReactJS? No, you don’t have to learn es2015/es6 to learn react ... Let’s see some of the frequently used ES6 features, 1 ... props ... props ... props “‘ 2 ... props} /> “‘ 3 ... map(function (user) { return <li>{user ... map(user => <li>{user ... What is Concurrent Rendering? The Concurrent rendering makes React apps to be more responsive by rendering component trees without blocking the main UI thread ... i ... You can enable this in two ways, // 1 ... unstable_ConcurrentMode> <Something /> </React ... Whole app using createRoot ReactDOM ... render(<App />); � Back to Top 320 ... Previously concurrent Mode being referred to as “Async Mode” by React team ... So it avoids the confusion from other approaches to Async Rendering ... Can I use javascript urls in react16 ... Because URLs starting with javascript: are dangerous by including unsanitized output in a tag like <a href> and create a security hole ... website}>More details</a> Remember that the future versions will throw an error for javascript URLs ... What is the purpose of eslint plugin for hooks? The ESLint plugin enforces rules of Hooks to avoid bugs ... In particular, the rule enforces that, 1 ... 2 ... � Back to Top 323 ... When you tap it, it turns blue if it was previously grey, and grey if it was previously blue ... likes() ) { if( hasBlue() ) { removeBlue(); addGrey(); } else { removeGrey(); addBlue(); } } Basically, you have to check what is currently on the screen and handle all the changes necessary to redraw it with the current state, including undoing the changes from the previous state ... In contrast, the declarative approach would be: if( this ... liked ) { return <blueLike />; } else { return <greyLike />; } Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a sepecific state, and is therefore much simpler to understand ... What are the benefits of using typescript with reactjs? Below are some of the benefits of using typescript with Reactjs, 1 ... 3 ... It is possible to use latest JavaScript features Use of interfaces for complex type definitions IDEs such as VS Code was made for TypeScript Avoid bugs with the ease of readability and Validation � Back to Top 325 ... js ... 152 App ... /actions/auth'; store ... js, wrap the AuthState in index ... js can access the auth context ... index ... /App'; AuthState from ' ... render( <React ... StrictMode>, document ... js const authContext = useContext(AuthContext); const { loadUser } = authContext; useEffect(() => { loadUser(); },[]) loadUser const loadUser = async () => { const token = sessionStorage ... data ... error(err); } } � Back to Top 326 ... It is possible to use JSX without importing React packages 2 ... The future improvements provides the flexibility to reduce the number of concepts to learn React ... How does new JSX transform different from old transform? The new JSX transform doesn’t require React to be in scope ... e, You don’t need to import React package for simple scenarios ... createElement('h1', null, 'Good morning!!'); } New Transform: The new JSX transform doesn’t require any React imports function App() { return <h1>Good morning!!</h1>; } Under the hood JSX transform compiles to below code import {jsx as _jsx} from 'react/jsx-runtime'; function App() { return _jsx('h1', { children: 'Good morning!!' }); } Note: You still need to import React to use Hooks ... How do you get redux scaffolding using create-react-app? Redux team has provided oﬀicial redux+js or redux+typescript templates for create-react-app project ... 2 ... 4 ... Javascript template: npx create-react-app my-app --template redux 2 ... 155 What are React Server components? React Server Component is a way to write React component that gets rendered in the server-side with the purpose of improving React app performance ... Note: React Server Components is still under development and not recommended for production yet ... What is prop drilling? Prop Drilling is the process by which you pass data from one component of the React Component tree to another by going through other components that do not need the data but only help in passing it around ... What is state mutation and how to prevent it? State mutation happens when you try to update the state of a component without actually using setState function ... This is the main reason why it is advised to return new instances of state variables from the reducers by using Object ... This can cause unknown issues in the UI as the value of the state variable got updated without telling React to check what all components were being affected from this update and it can cause UI bugs ... component { constructor(props) { super(props); this ... state; loading = (() => true)(); // Trying to perform an operation and directly saving in a state variable } “‘ How to prevent it: Make sure your state variables are immutable by either enforcing immutability by using plugins like Immutable ... � Back to Top 332 ... useState causes components to re-render after state updates whereas useRef doesn’t cause a component to re-render when the value or state changes ... current) property ... useState allows us to update the state inside components ... � Back to Top Disclaimer The questions provided in this repository are the summary of frequently asked questions across numerous companies ... The primary purpose is for you to get a sense of what some companies might ask — do not get discouraged if you don’t know the answer to all of them — that is ok! Good luck with your interview � 157 <hr /><div class="preview_top">Title: Reactjs Interview Questions Description: React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.in this notes i have done 300+ interview questions and answers so that is best for interview from my side <div class="noteinfo"><a class="buybasket" href="/buy/273454">Buy These Notes</a><a class="action preview" href="preview/273454">Preview</a></div></div> </div> </div> </div> <div class="container"> <div id="footer"> <ul class="info"> <li><a href="become-a-notesale-ambassador">Become a Notesale Ambassador</a></li> </ul> <ul class="anc"> <li><a href="terms-and-conditions">Ts and Cs</a></li> <li class="last"><a href="contact-us">Contact Us</a></li> </ul> </div> </div> <script type="text/javascript" src="/path.js"></script> <script type="text/javascript" src="/notesale.js"></script> </body> </html>

Notesale: Turn your study into money

Already a Member? >

Search for notes by fellow students, in your own course and all over the country.

My Basket

Document Preview